<template>
  <div class="user-manage_page">
    <Table border :columns="columns" :data="data" >
        <template slot-scope="{ row }" slot="email" >
            <strong>{{ row.email }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" @click="show(index)" size="small" style="margin-right: 5px">变更权限</Button>
            <Button type="error" size="small" @click="remove(index)">删除</Button>
        </template>
    </Table>
    <Page :total="total" show-total @on-change='currentPage' style="margin-top:6px"/>
    <Modal
        v-model="modal"
        :title="title"
        :loading="loading"
        @on-ok="asyncOK()">
        <p v-html="this.content"></p>
    </Modal>
  </div>
</template>
<script>
    export default {
        data () {
            return {
              modal: false,
              loading: true,
              content:'',
              index:'',
              title:'',
              flag:1,
              current:0,//当前页数
              limit:10,//每页的数据
              total:10,//总数
                columns: [
                    {
                        title: 'Email(唯一id)',
                        slot: 'email',
                        sortable: true,
                    },
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '注册时间',
                        key: 'created_time',
                        sortable: true
                    },
                    {
                        title: '是否为管理员',
                        key: 'isAdmin',
                        sortable: true
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [
                    
                ]
            }
        },
        methods: {
            asyncOK () {
              if(this.flag){
                  let that = this
                  this.$axios.post('/api/manage/privilege',{email:this.data[this.index].email}).then(res =>{
                      setTimeout(() => {
                              this.modal = false;
                          }, 500);
                      if(res.data.err_code == 2){
                          that.$Message.error('权限不足！');
                      }else if(res.data.err_code == 1){
                          that.$Message.error('你好像被开除了！');
                      }else if(res.data.err_code == 0){
                          that.$router.push('/login')
                      }else if(res.data.err_code == 3){
                          that.$Message.error('找不到要修改的用户！');
                      }else if(res.data.err_code == 4){
                          that.$Message.success('权限修改成功！');
                          that.init()
                      }else if(res.data.err_code == 5){
                          that.$Message.error('超级管理员，修改不了！');
                      }
                      else{
                          that.$Message.error('权限修改失败！')
                      }
                  })
              }else{
                   let that = this
                  this.$axios.post('/api/manage/user/del',{email:this.data[this.index].email}).then(res =>{
                      setTimeout(() => {
                              this.modal = false;
                          }, 500);
                      if(res.data.err_code == 2){
                          that.$Message.error('权限不足！');
                      }else if(res.data.err_code == 1){
                          that.$Message.error('你好像被开除了！');
                      }else if(res.data.err_code == 0){
                          that.$router.push('/login')
                      }else if(res.data.err_code == 4){
                          that.$Message.error('找不到要删除的用户！');
                      }else if(res.data.err_code == 3){
                          that.$Message.success('用户删除成功！');
                          that.data.splice(that.index, 1);
                      }else if(res.data.err_code == 5){
                          that.$Message.error('超级管理员，修改不了！');
                      }
                      else{
                          that.$Message.error('用户删除失败！')
                      }
                  })
              }
            },
            show (index) {
              this.modal = true;
              this.index = index;
              this.title = "用户权限设置";
              this.flag = 1;
              this.content =  `Email：${this.data[index].email}<br>Name：${this.data[index].name}<br>isAdmin：${this.data[index].isAdmin}
              <br><p style="color:red">变更权限会把普通用户变为管理员，管理员变为普通用户!!!</p>`
            },
            remove (index) {
                this.modal = true;
                this.title = "删除用户";
                this.index = index;
                this.flag = 0;
                this.content = `<p style="color:red">一旦删除，用户所有信息都会消失，不可撤销!!!</p>`
                // this.data.splice(index, 1);

            },
            init(){
              let that = this
              this.$axios.post('/api/manage/user/get',{page:this.current,limit:10}).then(res =>{
                  this.total = res.data.total;
                  if(res.data.err_code == 0){
                    that.$router.push('/login')
                  }else if(res.data.err_code == 1){
                    that.$Message.error('没查询到用户！')
                  }else if(res.data.err_code == 2){
                    res.data.data.forEach(item=>{
                        if(item.isAdmin){
                            item.isAdmin = '是'
                        }else{
                            item.isAdmin = '否'
                        }
                    })
                     that.data = res.data.data
                  }else{
                    that.$Message.error('服务器出错！')
                  }
                  
              })
            },
            currentPage(page){
              this.current = page-1;
              this.init()
            }
             
        },
        mounted(){
          this.init()
        }
    }
</script>
